<!--  -->
<template>
  <div class="home-center-bottom-wrapper">
    <ul class="center-bottom-list">
      <li
        v-for="(item, index) in listData? listData : []"
        :key="index"
        :class="'list' + index"
      >
        <catalogueItem :params="item"></catalogueItem>
      </li>
    </ul>
    <div class="center-bottom-name" ref="centerBottomName">
      <p class="title hy-lingxinti" ref="centerBottomNameTitle"></p>
      <p class="sub-title hy-35J" ref="centerBottomNameSubTitle"></p>
    </div>
    <div class="center-bottom-bottom" ref="centerBottomBottom"></div>
    <div class="center-bottom-center" ref="centerBottomCenter">
      <div class="line-top" ref="centerBottomCenterLine"></div>
      <div class="line-bottom" ref="centerBottomCenterLine1"></div>
      <p class="center-bottom-num-bg digital" ref="centerBottomCenterNumBg">
        {{ numBg }}
      </p>
      <p class="center-bottom-num digital" ref="centerBottomCenterNum">
        {{ num | fomatterNum }}
      </p>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import catalogueItem from './catalogueItem'
import axios from 'axios'
export default {
  name: '',
  components: {
    catalogueItem
  },
  data() {
    return {
      listData: [],
      num: 0,
      title: '门店专项活动',
      numBg: '000,000,000,000',
      value: 0,
      showData:[]
    }
  },
  filters: {
    fomatterNum(num) {
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    }
  },
  computed: {
    ...mapState(['dataSet'])
  },
  watch: {},
  created() {
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData(){
     this.getSpecialActiveNum();
     this.getActivityCountByStatus();
     this.getGeneralActivityTotal();
    },
    getSpecialActiveNum(){
      var data = { 'account': '2020-06', 'tenant_id': 'uni099'}
      axios.post(apiUrl + 'api/bigscreen/specialActiveNum', data).then(res => {
        this.num=res.data[0].activity_count;
      }).catch(err => {
        console.log(err)
      })
    },
    getActivityCountByStatus(){
      var data = { 'account': '2020-06', 'tenant_id': 'uni099'}
      axios.post(apiUrl + 'api/bigscreen/getActivityCountByStatus', data).then(res => {
        this.listData.push({"title": "专项活动数", "value": res.data[0].zx_count})
        this.listData.push({"title": "常规活动数", "value": res.data[0].cg_count})
        this.listData.push({"title": "场景活动数", "value": res.data[0].cj_count})
      }).catch(err => {
        console.log(err)
      })
    },
    getGeneralActivityTotal(){
      var data = { 'account': '2020-06', 'tenant_id': 'uni099'}
      axios.post(apiUrl + 'api/bigscreen/generalActivityTotal', data).then(res => {
        this.listData.push({"title": "本月通用活动总量", "value": res.data[0].activity_total})
        this.listData.push({"title": "本月新增活动量", "value": res.data[0].activity_new_count})
        this.listData.push({"title": "本月延续活动量", "value": res.data[0].activity_continue_count})
      }).catch(err => {
        console.log(err)
      })
    },
    init() {
      let _this = this
      let tl = new TimelineMax({})
      let catalogueItem = app.partServer.getCompByTagName('catalogueItem'),
        len = catalogueItem.length
      let centerBottomName = TweenMax.to(this.$refs.centerBottomName, 0.3, {
        opacity: 1,
        scale: 1
      })
      let centerBottomNameTitle = TweenMax.to(this.$refs.centerBottomNameTitle, 0.8, {
        opacity: 1,
        scrambleText: {
          text: this.title,
          chars: '_ ',
          speed: 0.3
        }
      })
      let centerBottomNameSubTitle = TweenMax.to(this.$refs.centerBottomNameSubTitle, 0.8, {
        opacity: 1,
        scrambleText: {
          text: this.subTitle,
          chars: '_ ',
          speed: 0.3
        }
      })
      let centerBottomBottom = TweenMax.to(this.$refs.centerBottomBottom, 0.3, {
        opacity: 1,
        scale: 1
      })

      let centerBottomCenter = TweenMax.to(this.$refs.centerBottomCenter, 0.3, {
        opacity: 1,
        scale: 1
      })
      let centerBottomCenterLine = TweenMax.to(this.$refs.centerBottomCenterLine, 0.3, {
        opacity: 1,
        scale: 1
      })
      let centerBottomCenterLine1 = TweenMax.to(this.$refs.centerBottomCenterLine1, 0.3, {
        opacity: 1,
        scale: 1
      })
      let centerBottomCenterNumBg = TweenMax.to(this.$refs.centerBottomCenterNumBg, 0.3, {
        opacity: 1
      })
      let centerBottomCenterNum = TweenMax.to(this.$refs.centerBottomCenterNum, 0.3, {
        opacity: 1
      })
      let value = TweenMax.to(this, 1.5, {
        num: () => _this.value,
        roundProps: ['num']
      })
      tl.addLabel('start')

      tl.add(centerBottomName, 'start+=0')
        .add(this.handleData, 'start')
        .add(centerBottomNameTitle, 'start+=0.2')
        .add(centerBottomNameSubTitle, 'start+=0.3')
        .add(centerBottomBottom, 'start+=0.6')
        .add(centerBottomCenter, 'start+=0.4')
        .add(centerBottomCenterLine, 'start+=0.4')
        .add(centerBottomCenterLine1, 'start+=0.4')
        .add(centerBottomCenterNumBg, 'start+=0.4')
        .add(centerBottomCenterNum, 'start+=0.5')
        .add(value, 'start+=0.5')
        .add(catalogueItem[0].init(), 'start+=0.4')
        .add(catalogueItem[1].init(), 'start+=0.6')
        .add(catalogueItem[2].init(), 'start+=0.8')
        .add(catalogueItem[3].init(), 'start+=0.4')
        .add(catalogueItem[4].init(), 'start+=0.6')
        .add(catalogueItem[5].init(), 'start+=0.8')
      return tl
    },
    handleData() {
      if(this.dataSet.centerBottom){
        // this.listData = this.dataSet.centerBottom.data
        this.value = this.num
      }
      
    }
  }
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.home-center-bottom-wrapper {
  width: 100%;
  height: 100%;
}
.center-bottom-list {
  width: 100%;
  height: 100%;
  li {
    position: absolute;
    width: 136px;
    height: 58px;
  }
  .list0 {
    top: 0;
    left: 65px;
  }
  .list1 {
    top: 78px;
    left: 65px;
  }
  .list2 {
    top: 156px;
    left: 65px;
  }
  .list3 {
    top: 0;
    right: 50px;
  }
  .list4 {
    top: 78px;
    right: 50px;
  }
  .list5 {
    top: 156px;
    right: 50px;
  }
}
.center-bottom-name {
  position: absolute;
  width: 554px;
  height: 129px;
  left: 220px;
  bottom: 82px;
  background: url('../../../assets/imgs/center/top-bg.png') no-repeat;
  text-align: center;
  opacity: 0;
  transform: scale(0);
  .title {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    height: 32px;
    font-size: 30px;
    color: #fff;
    opacity: 0;
  }
  .sub-title {
    position: absolute;
    top: 67px;
    left: 0;
    width: 100%;
    height: 32px;
    font-size: 14px;
    color: #fff;
    opacity: 0;
  }
}
.center-bottom-bottom {
  position: absolute;
  bottom: -15px;
  left: -15px;
  width: 998px;
  height: 84px;
  background: url('../../../assets/imgs/center/bottom-bg.png') no-repeat;
  opacity: 0;
  transform: scale(0);
}
.center-bottom-center {
  position: absolute;
  width: 360px;
  height: 50px;
  bottom: 50px;
  left: 304px;
  background: linear-gradient(
    to right,
    rgba(5, 96, 240, 0) 0,
    rgba(5, 96, 240, 0.4) 50%,
    rgba(5, 96, 240, 0) 100%
  );
  opacity: 0;
  transform: scale(0);
  .line-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      to right,
      rgba(5, 96, 240, 0.1) 0,
      rgba(5, 96, 240, 0.3) 50%,
      rgba(5, 96, 240, 0.1) 100%
    );
    opacity: 0;
    transform: scale(0);
  }
  .line-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      to right,
      rgba(5, 96, 240, 0.1) 0,
      rgba(5, 96, 240, 0.3) 50%,
      rgba(5, 96, 240, 0.1) 100%
    );
    opacity: 0;
    transform: scale(0);
  }
  .center-bottom-num-bg {
    position: absolute;
    width: 335px;
    height: 100%;
    top: 0;
    left: 2px;
    line-height: 50px;
    text-align: right;
    font-size: 48px;
    color: #070622;
    opacity: 0;
  }
  .center-bottom-num {
    position: absolute;
    width: 335px;
    height: 100%;
    top: 0;
    left: 2px;
    line-height: 50px;
    text-align: right;
    font-size: 48px;
    color: rgba(0, 247, 250, 1);
    text-shadow: 3px 0 6px rgba(3, 94, 240, 0.4),
      -3px 0 6px rgba(3, 94, 240, 0.4), 0 3px 6px rgba(3, 94, 240, 0.4),
      0 -3px 6px rgba(3, 94, 240, 0.4);
    opacity: 0;
  }
}
</style>
